<template>
  <div fluid grid-list-md class="agent-query-container">
     

      <v-layout row wrap align-content-start>
        <v-flex md10 xs12>
          <v-layout row wrap align-content-start>
            <v-flex md2 xs5 class="mx-2">
              <v-text-field
                mask="######"
                name="lftid"
                label="玩家ID"
                v-model="queryForm1.lftid"
                counter="6"
                type="number"
                maxlength="6"
              ></v-text-field>
            </v-flex>
            <v-flex md2 xs5 class="mx-2">
              <v-text-field name="nickname" label="玩家昵称" v-model="queryForm1.nickname"></v-text-field>
            </v-flex>
            <v-flex md2 xs5 class="mx-2">
              <v-text-field name="cdkey" label="兑换码" v-model="queryForm1.cdkey"></v-text-field>
            </v-flex>
            <v-flex md2 xs5 class="mx-2">
              <v-text-field name="describe" label="奖品名称" v-model="queryForm1.describe"></v-text-field>
            </v-flex>
            <v-flex md2 xs5 class="mx-2">
              <v-btn @click="search1" dark color="blue" class="mt-2">
                <v-icon>search</v-icon>
                <span class="pl-2 subheading">搜索</span>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-flex>

        <v-flex row md12 justify-center xs12 class="overflow-table">
          <div class="table-container pos-abs">
            <v-card class="custom-table-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="custom-table">
                <thead>
                  <tr>
                    <th v-for="(item, i) of headers1" :key="i">
                      <div>{{item.text}}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers1.length" class="column">
                      <div  class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>

                  <tr v-for="item of tableData1" :key="item.id">
                    <td>{{item.lftid}}</td>
                    <td class="text-xs-center">
                      <v-avatar size="36">
                        <img :src="item.headUrl" alt>
                      </v-avatar>
                    </td>
                    <td>{{item.nickname}}</td>
                    <td>{{getTime(item.applyTime)}}</td>
                    <td>{{item.describe}} </td>
                    <td>{{item.consum}}</td>
                    <td>{{item.cdkey}}</td>
                    <td
                      class="text-xs-center subheading"
                      :style="{color: statusMap[item.status].color}"
                    >{{ statusMap[item.status].text }}</td>
                    <td>{{getTime(item.finishTime)}}</td>

                    <td class="text-xs-center">
                      <v-btn
                        v-if="item.status == 0"
                        flat
                        round
                        dark
                        color="orange darken-3"
                        class="mx-1"
                        @click="markAsRedeemed(item)"
                      >
                        <span class="mx-1">标记已发奖</span>
                        <v-icon color="orange darken-1">check_circle_outline</v-icon>
                      </v-btn>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" class="title">待发奖数量</td>
                    <td colspan="1" class="title">{{extraTr1.unCash}}</td>
                    <td colspan="1" class="title">已发奖数量</td>
                    <td colspan="1" class="title">{{extraTr1.cash}}</td>
                    <td colspan="5"></td>
                  </tr>
                  <tr v-if="tableData1.length === 0">
                    <td :colspan="headers1.length" class>
                      <div  class="text-md-center">
                        <i
                          
                          aria-hidden="true"
                          class="icon yellow--text text--darken-3 material-icons"
                        >warning</i>
                        <span  class="subheading">暂无数据</span>
                      </div>
                    </td>
                  </tr>
                  <!-- <tr class="sum-row"></tr> -->
                </tbody>
              </table>
            </v-card>
            <div class="text-xs-center my-2">
              <v-pagination
                @input="pageChange1"
                circle
                :length="pagination1.pageCount"
                :total-visible="pagination1.totalVisible"
                v-model="pagination1.page"
              ></v-pagination>
            </div>
          </div>
        </v-flex>
      </v-layout>

    <v-dialog v-model="dialog" max-width="700px">
      <v-card class="px-3 py-3">
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <div grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm8 md6>
                <v-text-field prepend-icon="account_box" label="真实姓名" v-model="editedItem.realName"></v-text-field>
              </v-flex>
            </v-layout>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
import { redeem } from "../../api/activity";
import { getTime } from "../../util";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    showProgress: false,
    limit: 7,
    offset1: 0,
    offset2: 0,
    dialog: false,
    isSearch1: false,
    isSearch2: false,
    pagination1: {
      page: 1, //
      pageCount: 1,
      totalVisible: 7
    },
    pagination2: {
      page: 1, //
      pageCount: 1,
      totalVisible: 7
    },
    // 绑定到页面的
    queryForm1: {
      lftid: "",
      nickname: "",
      cdkey: ""
    },
    // 绑定到页面的
    queryForm2: {
      lftid: "",
      nickname: ""
    },
    // 实际发送查询条件
    form: {
      fromTime: "",
      toTime: "",
      lftid: "",
      nickname: "",
      superId: "",
      limit: 10,
      offset: 0,
      realName: ""
    },
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData1: [],
    tableData2: [],
    formTitle: "代理资料",
    tabs: "1",
    tabBefore: "1",
    tabItems: [
      {
        text: "玩家申请列表",
        value: 1
      },
      {
        text: "兑换记录列表",
        value: 2
      }
    ],
    headers1: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      {
        text: "申请时间",
        value: "proxyLevel",
        align: "center",
        sortable: false
      },
      {
        text: "申请兑换物品",
        value: "superId",
        align: "center",
        sortable: false
      },
      { text: "消耗", value: "nickname", align: "center", sortable: false },
      {
        text: "兑换码",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "状态",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      {
        text: "发奖时间",
        value: "totalPrice",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    headers2: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      {
        text: "已获得红包总额",
        value: "total",
        align: "center",
        sortable: false
      },
      {
        text: "已兑换红包总额",
        value: "redeemed",
        align: "center",
        sortable: false
      },
      {
        text: "未兑换红包总额",
        value: "unredeemed",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      uid: "",
      name: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,
      telephone: 0,
      superId: 0,
      saleLevel: 1,
      proxyLevel: 1,
      createTime: "2018-4-19"
    },

    chipItems2: [
      {
        name: "已获得红包",
        value: 1
      },
      {
        name: "已兑换红包",
        value: 2
      },
      {
        name: "未兑换红包",
        value: 3
      }
    ],
    chipSelected1: 1,
    chipSelected2: 1,
    modal: false,
    modalText: "",
    modalType: 0,
    cancelItem: null,
    showCancel: false,
    currentDate: "",
    extraTr1: {
      unCash: 0,
      cash: 0
    },
    extraTr2: {
      totalMyPrice: 0,
      totalUnCash: 0,
      totalCash: 0
    },
    statusMap: {
      '0': {
        text: '未发奖',
        color: 'red'
      },
      '1': {
        text: '已发奖',
        color: 'blue'
      },
      '2': {
        text: '已取消',
        color: 'teal'
      }
    }
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getRedeemList();
    // this.initialize();
  },
  methods: {
    getTime,
    refresh() {
      this.isSearch1 = false;
      this.isSearch2 = false;
      this.offset1 = 0;
      this.offset2 = 0;
      this.chipSelected2 = 1;
      this.queryForm1 = {
        lftid: "",
        nickname: "",
        cdkey: "",
        describe: ""
      };
      this.queryForm2 = {
        lftid: "",
        nickname: ""
      };
      this.pagination1.page = 1;
      this.pagination2.page = 1;
      this.getRedeemList();
    },
    // 获取玩家申请兑换红包列表
    getRedeemList() {
      const qs = {
        limit: this.limit,
        offset: this.offset1
      };
      this.showProgress = true;
      redeem.getRedeemList.r(qs).then(({ data }) => {
        console.log("getRedeemList", data);
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data.voList;
            this.tableData1 = rankData;
            this.extraTr1.unCash = data.data.unCash;
            this.extraTr1.cash = data.data.cash;
            this.pagination1.pageCount = data.data.totalRow
              ? Math.ceil(data.data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    // 标记为已发货
    getMarkedAsRedeemed() {
      const qs = {
        id: this.editedItem.id,
        rewardType: this.editedItem.rewardType
      };
      redeem.getMarkedAsRedeemed.r(qs).then(({ data }) => {
        this.modal = false;
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        console.log("getMarkedAsRedeemed".data);
        if (data.result === 0) {
          this.getRedeemList();
        }
      });
    },
    // 按条件查询红包列表
    searchRedPacketList(form) {
      this.showProgress = true;
      redeem.getRedeemList.r(form).then(({ data }) => {
        console.log("searchRedPacketList", data);
        if (data.result === 0) {
          if (data.data) {
            let rankData = data.data.voList;

            this.tableData1 = rankData;
            this.pagination1.pageCount = data.data.totalRow
              ? Math.ceil(data.data.totalRow / this.limit)
              : 1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },

    initialize() {
      this.tableData1 = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          applyAmount: 8.88,
          cdkey: "D67J888",
          status: 1,
          createTime: "2018-4-19",
          redeemTime: "2018-7-21",
          ranking: 1
        }
      ];
      this.tableData2 = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 103214,
          nickname: "搭街坊",
          total: 58.88,
          redeemed: 34,
          unredeemed: 12
        }
      ];
    },
    getTabClicked() {
      if (this.tabBefore == this.tabs) {
        this.refresh();
      } else {
        this.tabBefore = this.tabs;
      }
    },
    // 标记为已发奖
    markAsRedeemed(item) {
      this.modal = true;
      this.modalText = "是否确认标记为已发奖？";
      this.editedItem = item;
      this.modalType = 1;
    },
    redpacketRecord(item) {
      this.$router.push(
        `/activity/redpacketdetail?uid=${item.uid}&name=${encodeURI(
          item.nickname
        )}`
      );
    },
    search1(fromPage) {
      let valid = 0;
      let form = {};
      _.forEach(this.queryForm1, (item, key) => {
        item ? (form[key] = item) : valid++;
      });
      if (valid == 4) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请至少选择一个查询条件"
        });
      }
      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset1 = 0;
        this.pagination1.page = 1;
      }
      form.limit = this.limit;
      form.offset = this.offset1;
      this.searchRedPacketList(form);
      this.isSearch1 = true;
    },
    pageChange1(page) {
      this.offset1 = (page - 1) * this.limit;
      if (!this.isSearch1) {
        this.getRedeemList();
      } else {
        // ***
        this.search1("wyvj");
      }
    },
    chipClicked(item, type) {
      this["chipSelected" + type] = item.value;
      if (type === 2) {
        this.pagination2.page = 1;
        this.offset2 = 0;
        this.queryForm2 = {
        lftid: "",
        nickname: ""
      };
      }
    },
    confirmDialog() {
      // this.editAgentDetail();
    },
    confirmModal() {
      if (this.modalType === 1) {
        this.getMarkedAsRedeemed();
      }
    }
  }
};
</script>
<style lang="less" scoped>

</style>